<template>
  <div class="course-detail">
    <el-card v-if="course">
      <div slot="header" class="clearfix">
        <span>课程详情</span>
        <el-button style="float: right;" @click="$router.back()">返回</el-button>
      </div>
      <el-descriptions :title="course.title" border>
        <el-descriptions-item label="课程ID">{{ course.id }}</el-descriptions-item>
        <el-descriptions-item label="讲师">{{ course.instructor && course.instructor.username }}</el-descriptions-item>
        <el-descriptions-item label="简介" :span="3">{{ course.description }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div v-if="course" class="jump-btns">
      <el-button type="primary" @click="goToMaterials">课程资料</el-button>
      <el-button type="success" @click="goToChat">AI问答</el-button>
      <el-button type="info" @click="goToProgress">学习进度</el-button>
    </div>
    <el-empty v-else description="未找到课程信息" />
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'CourseDetail',
  data() {
    return {
      course: null
    }
  },
  created() {
    this.fetchCourse()
  },
  methods: {
    fetchCourse() {
      const id = this.$route.params.id
      request.get(`/api/courses/${id}`)
        .then(data => {
          this.course = data
        })
        .catch(() => {
          this.course = null
        })
    },
    goToMaterials() {
      this.$router.push({ name: 'CourseMaterials', params: { courseId: this.course.id } })
    },
    goToChat() {
      this.$router.push({ name: 'CourseChat', params: { courseId: this.course.id } })
    },
    goToProgress() {
      this.$router.push({ name: 'CourseProgress', params: { courseId: this.course.id } })
    }
  }
}
</script>

<style scoped>
.course-detail {
  max-width: 700px;
  margin: 40px auto;
}
.jump-btns {
  margin: 24px auto 0 auto;
  text-align: center;
}
.jump-btns .el-button {
  margin: 0 12px;
}
</style> 